import React, {Component} from 'react';
import './index.less'
import logo from '../../assets/images/logo.png'
import {Form, Input, Button, message} from 'antd';
import { UserOutlined ,LockOutlined } from '@ant-design/icons';
import {reqLogin} from '../../api'
import memoryUtils from "../../utils/memoryUtils";
import stoageUtils from '../../utils/stoageUtils'
import {Redirect} from "react-router-dom";
const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 24,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 0,
        span: 24,
    },
};




class Login extends Component {
    onFinish = async (values) => {
        const {username,password} = values
        const response = await reqLogin(username, password)
        console.log('成功了',response)
        if(response.status === 0){
            message.success('登陆成功')
            memoryUtils.user = response.data
            stoageUtils.saveUser(response.data)

            this.props.history.replace('/')
        }else {
            message.error("登陆失败")
        }
        // console.log('Success:', res);
    };

    onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    render() {
        const user = memoryUtils.user
        if(user && user._id){
            return <Redirect to='/'></Redirect>
        }
        return (
            <div className="login">
                <header className="login-header">
                    <img src={logo} alt="logo"/>
                    <h1>后台管理</h1>
                </header>
                <section className="login-content">
                    <h2>用户登录</h2>
                    <Form
                        {...layout}
                        name="basic"
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={this.onFinish}
                        onFinishFailed={this.onFinishFailed}
                    >
                        <Form.Item
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your username!',
                                },
                            ]}
                        >
                            <Input
                                prefix={<UserOutlined />}
                                placeholder={"Username"}/>
                        </Form.Item>

                        <Form.Item
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your password!',
                                },
                            ]}
                        >
                            <Input.Password
                                prefix={<LockOutlined />}
                                placeholder="password"/>
                        </Form.Item>

                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit" className="login-button">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </section>
            </div>
        );
    }
}

export default Login;